<template>
  <div class="supplier-and-contract">
    <div class="block_supplier">
      <header>
        <h2 class="required">
          供应商选择
        </h2>
      </header>
      <section>
        <el-form>
          <el-form-item>
            <el-select
              v-model="supplier_id"
              placeholder="请选择供应商"
              :disabled="disabled"
              @change="onChangeSupplier"
            >
              <el-option
                v-for="item in rows_supplies"
                :key="item.shortCode"
                :label="item.orgName"
                :value="item.shortCode"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </section>
    </div>
    <div class="block_supplier select-contract-part">
      <header>
        <h2 class="required">
          授权医院选择
        </h2>
      </header>
      <section
        v-if="payload_contracts.length > 0"
        class="select-contract-table"
      >
        <el-radio-group
          v-model="contract_id"
          class="w100p radioGroup"
          @change="onChangeContract"
        >
          <el-radio
            v-for="(item, index) in payload_contracts"
            :key="index"
            :label="item.accountNumber"
          >
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.customerName"
              placement="top-start"
            >
              <span>{{ item.customerName }}</span>
            </el-tooltip>
          </el-radio>
        </el-radio-group>
      </section>
      <section v-else>
        <span>暂无数据</span>
      </section>
    </div>
    <el-dialog
      title="更换供应商"
      :visible.sync="dialogVisible.supplier"
      width="30%"
      :before-close="handleCloseSupplierDialog"
    >
      <span>更换供应商后，对应的消耗产品都会清空</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="supplierDialogRefuse">取 消</el-button>
        <el-button type="primary" @click="supplierDialogConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="更换医院"
      :visible.sync="dialogVisible.contract"
      width="30%"
      :before-close="handleCloseContractDialog"
    >
      <span>更换医院后，对应的消耗产品都会清空</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="contractDialogRefuse">取 消</el-button>
        <el-button type="primary" @click="contractDialogConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line import/no-unresolved
import ElEditable from '@components/el-editable';
// eslint-disable-next-line import/no-unresolved
import { selectDistributorList } from '@api/guoke_deepexi_interface_center_v1';
import * as CONSTS from './supplier-and-contract.const';
// import { hospitalOrderType, contract } from '@api/m_mall_web_v1';
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    ElEditable
  },
  props: {
    supplierId: {
      type: String,
      default() {
        return '';
      }
    },
    contractId: {
      type: String,
      default() {
        return '';
      }
    },
    busModel: {
      type: String,
      default() {
        return '';
      }
    },
    products: {
      type: Array,
      default: () => []
    },
    orderType: {
      type: String,
      default() {
        return '';
      }
    },
    onsignOrderType: Boolean,
    isFirstMount: Boolean,
    productLoading: Boolean,
    disabled: Boolean
  },
  data() {
    return {
      ...CONSTS,
      table_query: {},
      rows_supplies: [], // 产品线列表数据
      payload_contracts: [], // 产品线数据
      supplier_id: '',
      contract_id: '',
      full_data: {
        orgName: '',
        orgId: '',
        shortCode: '',
        contractName: '',
        contractCode: '',
        originalFactoryName: '',
        originalFactoryCode: '',
        customerName: '',
        accountNumber: ''
      },
      storaged: {
        supplier_id: '',
        contract_id: ''
      },
      dialogVisible: {
        supplier: false,
        contract: false
      },
      contractTableLoading: false
    };
  },
  computed: {
    // 判断是否存在产品信息或订单类型，如果存在则为true，用于在切换供应商或合同时提示
    isNeedAlert() {
      if (this.products.length > 0) {
        return true;
      }
      return false;
    }
  },
  watch: {
    supplierId: {
      handler(val) {
        if (val !== '') {
          this.supplier_id = val;
          this.storaged.supplier_id = val;
          this.onLoadData();
          // 当重新获取合同列表时，手动清空合同绑定的及缓存的值
          // 如果是第一次加载，则不把合同置为空
          // 只要没切换supplierId，或者ContractId就视为第一次加载
          if (!this.isFirstMount) {
            this.contract_id = '';
            this.storaged.contract_id = '';
            this.full_data.contract = '';
            // 清空相应数据后还要更新
            this.$emit('update:contractId', this.contract_id);
          }
        }
      },
      immediate: true
    },
    contractId: {
      handler(val) {
        this.contract_id = val;
        this.storaged.contract_id = val;
      },
      immediate: true
    }
  },
  created() {
    this.getSuppliers();
  },
  methods: {
    getSuppliers() {
      this.$axios({
        method: 'post',
        url: selectDistributorList,
        data: {}
      }).then(res => {
        this.rows_supplies = res.data.payload || [];
      });
    },
    async onLoadData() {
      if (!this.supplier_id) {
        this.$message.error('请选择供应商');
        return;
      }
      this.contractTableLoading = true;
      this.$axios({
        method: 'post',
        url: `/guoke-deepexi-interface-center/api/v1/mdm/IcEbsContractAuthHospital/selectHospList?shortCode=${this.supplier_id}`
        // data: {
        // supplierOrgId: this.rows_supplies.find(item => item.shortCode === this.supplier_id).orgId,
        // shortCode: this.supplier_id
        // }
      })
        .then(res => {
          this.payload_contracts = res.data.payload;
          const contract = this.payload_contracts.find(
            item => item.accountNumber === this.contract_id
          );
          // this.full_data.accountNumber = contract.accountNumber
          if (contract !== undefined) {
            const supplier = this.rows_supplies.find(
              item => item.shortCode === this.supplier_id
            );
            this.full_data.orgName = supplier.orgName;
            // this.full_data.orgId = supplier.orgId;
            this.full_data.shortCode = supplier.shortCode;
            Object.assign(this.full_data, contract);
            this.$emit('change', this.full_data);
          }
        })
        .finally(() => {
          this.contractTableLoading = false;
        });
    },
    supplierCommonProgress(supplierId) {
      // 走剩下的逻辑
      this.$emit('update:supplierId', supplierId);
      const suppliy = this.rows_supplies.find(
        item => item.shortCode === supplierId
      );
      // 为了上一层的取值，这里额外再赋值一下
      this.full_data.suppliy = suppliy;
      Object.assign(this.full_data, suppliy);
      // 这里通过emit给上级传递数据，触发watch，加载数据
      this.$emit('update:isFirstMount', false);
      this.$emit('change', this.full_data);
    },
    onChangeSupplier(value) {
      if (this.isNeedAlert) {
        this.dialogVisible.supplier = true;
      } else {
        this.storaged.supplier_id = value;
        this.supplierCommonProgress(value);
      }
    },
    supplierDialogConfirm() {
      this.dialogVisible.supplier = false;
      // 确定更新，要更新暂存数据，重新赋值
      this.storaged.supplier_id = this.supplier_id;
      // 加这个字段，是因为无论取消还是确定都要更新
      // this.needClearSupplier = true;
      this.supplierCommonProgress(this.supplier_id);
    },
    supplierDialogRefuse() {
      this.dialogVisible.supplier = false;
      // 取消的话，要把当前暂存的数据重新赋值给当前状态值
      this.supplier_id = this.storaged.supplier_id;
      // this.needClearSupplier = false;
      // this.supplierCommonProgress(this.supplier_id);
    },
    handleCloseSupplierDialog() {
      this.supplierDialogRefuse();
    },
    contractCommonProgress(contractId) {
      this.$emit('update:contractId', contractId);
      this.storaged.contract_id = contractId;
      const contract = this.payload_contracts.find(
        item => item.accountNumber === contractId
      );
      // 为了上一层的取值，这里额外再赋值一下
      this.$emit('update:isFirstMount', false);
      this.full_data.contract = contract;
      this.$emit('change', this.full_data);
    },
    onChangeContract(contractId) {
      if (this.isNeedAlert) {
        this.dialogVisible.contract = true;
      } else {
        this.storaged.contract_id = contractId;
        this.contractCommonProgress(contractId);
      }
    },
    contractDialogConfirm() {
      this.dialogVisible.contract = false;
      // 确定更新，要更新暂存数据，重新赋值
      this.storaged.contract_id = this.contract_id;
      this.contractCommonProgress(this.contract_id);
    },
    contractDialogRefuse() {
      this.dialogVisible.contract = false;
      // 取消的话，要把当前暂存的数据重新赋值给当前状态值
      this.contract_id = this.storaged.contract_id;
      // this.contractCommonProgress(this.contract_id);
    },
    handleCloseContractDialog() {
      this.contractDialogRefuse();
    }
  }
};
</script>

<style lang="less">
.radioGroup {
  width: 100%;
  .el-radio {
    width: 25%;
    margin: 0 0 10px 0;
    padding-right: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.supplier-and-contract {
  background: #ffffff;
  .block_supplier {
    margin: 0;
    padding: 20px 16px 0 16px;
    header {
      padding: 5px 0;
      border: none;
    }
    // .select-contract-table {
    //   .el-radio-group {
    //     .el-radio {
    //       width: 25%;
    //     }
    //   }
    // }
    section {
      padding: 5px 16px;

      .el-input__inner {
        width: 300px;
        color: #333;
        height: 38px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 0 26px 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .el-input__inner:hover {
        border-color: #4d84ff !important;
      }
    }
  }
  .el-radio.is-checked {
    .el-radio__inner {
      background: #4d84ff;
      border: 1px solid #4d84ff;
    }
    .el-radio__label {
      color: #4d84ff;
    }
  }
  .block_supplier.select-contract-part {
    padding: 5px 16px 0 16px;
    .el-radio-group {
      display: block;
      .el-radio {
        // margin-right: 80px;
        margin-bottom: 10px;
      }
    }
  }
  // /deep/.el-radio__input{
  //   width: 32px;
  //   height: 32px;
  // }
}
</style>
